<template>
  <div class="dietlist">
    <h4 v-for="(v,i) in 3" :key="i">
      <router-link to="/dietDetails">
        <img src="@/assets/img/shanyao.png" alt="" />
      </router-link>
      <h6>
        <span>山药</span>
        <span>湿气重</span>
      </h6>
    </h4>
  </div>
</template>

<script>
export default {
};
</script>

<style scoped>


h4 {
  height: 1.5rem;
  border-bottom: 0.01rem solid #999;
}
h4 img {
  float: left;
  width: 1.1rem;
  height: 0.85rem;
  margin: 0.3rem 0 0 0.2rem;
}
h6 {
    font-weight: 700;
  float: right;
  width: 2.3rem;
  height: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content:flex-start;
  align-items: flex-start;
  padding-top: .3rem;
}
h6 span:nth-child(1) {
  font-size: 0.18rem;
  
}
h6 span:nth-child(2) {
  font-size: 0.14rem;
  color: green;
  border: .01rem solid green;
  width: .6rem;
  height: .22rem;
  border-radius: .05rem;
  text-align: center;
  line-height: .22rem;
  margin-top: .1rem;
}
</style>